<!--表格组件 -->
<template>
  <section class="cy-table-page">
    <!-- 表格操作按钮 -->
    <section v-if="tableHandles.length>0" class="cy-handle">
      <el-button v-for="(item,index) in tableHandles" v-show="!(item.isHide && item.isHide(item))" :key="index" :size="item.size || size" :type="item.type" @click="item.handle($refs.cyTable.selection)&&item.handle "><i v-if="item.icon" class="iconfont" :class="item.icon" /> {{ item.label }}</el-button>
    </section>
    <!-- 数据表格 -->
    <section class="cy-table">
      <el-table
        ref="cyTable"
        v-loading="loading"
        :style="{'max-height': maxHeight}"
        :tree-props="treeProps"
        :row-key="rowKey"
        :stripe="stripe"
        :element-loading-background="theme==='dark'?'rgba(0, 0, 0, 0.7)':'rgba(255, 255, 255, 0.7)'"
        :data="tableData"
        :size="size"
        :max-height="maxHeight"
        :border="isBorder"
        :default-selections="defaultSelections"
        @selection-change="handleSelectionChange"
        @select-all="selectAll"
        @expand-change="expandChange"
      >
        <el-table-column v-if="isSelection" type="selection" :selectable="checkSelectable" align="center" fixed />
        <el-table-column v-if="isIndex" type="index" :label="indexLabel" align="center" width="60" />
        <!-- 数据栏 -->
        <el-table-column v-for="(item,key) in tableCols" :key="key" :show-overflow-tooltip="item.showOverflowTooltip||false" :type="item.isExpand?'expand':undefined" :prop="item.prop" :label="item.label" :width="item.width" :min-width="item.minWidth" :align="item.align || 'left'" :fixed="item.fixed">
          <template v-if="item.require||item.tooltip" #header>
            <span :class="{'cy-table-require':item.required}">
              {{ item.label }}
              <el-tooltip v-if="item.tooltip" effect="dark" placement="top">
                <template #content>
                  <div v-html="item.tooltipHtml()" />
                </template>
                <span class="iconfont iconquestion-circle" />
              </el-tooltip>
            </span>
          </template>
          <template #default="scope">
            <!-- html -->
            <el-popover v-if="item.type==='Popover'" effect="dark" trigger="hover" placement="top">
              {{ item.html(scope.row) }}
              <template #reference>
                <div class="name-wrapper">
                  {{ item.html(scope.row).substring(0, 100) }}
                </div>
              </template>
            </el-popover>
            <!-- html -->
            <div v-if="item.type==='Html'||item.type==='expand'" @click="item.handle&&item.handle(scope.row,$event)" v-html="item.html(scope.row)" />
            <!-- 按钮 -->
            <div v-if="item.type==='Button'">
              <slot name="insertBtnList" :data="scope.row" />
              <el-button
                v-for="(btn,index) in item.btnList"
                v-show="!(btn.isHide && btn.isHide(scope.row))"
                :key="index"
                :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
                :get-info="btn.getInfo && btn.getInfo((scope.row))"
                :type="btn.type"
                :style="btn.style"
                :size="btn.size || size"
                plain
                @click="btn.handle(scope.row,scope.$index)"
              >
                <i v-if="btn.icon" :class="btn.icon" style="margin-right:3px" />
                {{ btn.labelTxt?btn.labelRow(scope.row):btn.label }}
              </el-button>
              <el-dropdown v-if="item.dropdown" @command="handleCommand">
                <span class="el-dropdown-link">
                  更多<el-icon><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item v-for="(dropdown,downIndex) in item.dropdown" v-show="!(dropdown.isHide && dropdown.isHide(scope.row))" :key="downIndex" :command="{...scope.row,...dropdown}">{{ dropdown.label }}</el-dropdown-item>
                  </el-dropdown-menu>
                </template>

              </el-dropdown>

            </div>
            <!-- 输入框 -->

            <el-tooltip v-if="item.type==='Input'" :content="scope.row[item.prop]" placement="top" effect="light">
              <el-input v-if="item.type==='Input'" v-model="scope.row[item.prop]" :placeholder="item.placeholder" :size="item.size||size" :disabled="item.isDisabled && item.isDisabled(scope.row,scope.$index)" @focus="item.focus && item.focus(scope.row)" />
            </el-tooltip>

            <!-- 下拉框 -->
            <el-select v-if="item.type==='Select'" v-model="scope.row[item.prop]" :placeholder="item.placeholder" :size="item.size||size" :props="item.props" :disabled="item.isDisabled && item.isDisabled(scope.row,scope.$index)" @change="(val) => item.change && item.change(scope.row,scope.$index,val)">
              <el-option v-for="op in item.options" :key="op[item.props.value]" :label="op[item.props.label]" :value="op[item.props.value]" :disabled="op.disabled">
                {{ op[item.props.label] }}
              </el-option>
            </el-select>

            <!-- 表数据控制下拉框 -->
            <el-select v-if="item.type==='dataSelect'" v-model="scope.row[item.prop]" :placeholder="item.placeholder" :size="item.size||size" :props="item.props" :disabled="item.isDisabled && item.isDisabled(scope.row,scope.$index)" @change="item.change && item.change(scope.row)">
              <el-option v-for="op in scope.row.options" :key="op['val']" :label="op['label']" :value="op['val']" />
            </el-select>
            <!-- 联级-->
            <el-cascader
              v-if="item.type ==='Cascader'"
              v-model="scope.row[item.prop]"
              :options="item.options"
              :props="item.props"
              :show-all-levels="item.showLevels"
              collapse-tags
              :disabled="item.isDisabled && item.isDisabled(scope.row)"
              :placeholder="item.placeholder"
              @change="item.change && item.change(scope.row,scope.$index)"
            />
            <!-- 单选 -->
            <el-radio-group v-if="item.type==='Radio'" v-model="scope.row[item.prop]" :disabled="item.isDisabled && item.isDisabled(scope.row)" @change="item.change && item.change(scope.row)">
              <el-radio v-for="(ra,index) in item.radios" :key="index" :label="ra.value">{{ ra.label }}</el-radio>
            </el-radio-group>
            <!-- 复选框 -->
            <el-checkbox-group v-if="item.type==='Checkbox'" v-model="scope.row[item.prop]" :disabled="item.isDisabled && item.isDisabled(scope.row)" @change="item.change && item.change(scope.row)">
              <el-checkbox v-for="(ra,index) in item.checkboxs" :key="index" :label="ra.value">{{ ra.label }}</el-checkbox>
            </el-checkbox-group>
            <!-- 评价 -->
            <el-rate v-if="item.type==='Rate'" v-model="scope.row[item.prop]" :disabled="item.isDisabled && item.isDisabled(scope.row)" @change="item.change && item.change(scope.row)" />
            <!-- 开关 -->
            <el-switch v-if="item.type==='Switch'" v-model="scope.row[item.prop]" :disabled="item.isDisabled && item.isDisabled(scope.row)" :active-text="item.activeText||''" :inactive-text="item.inactiveText||''" @change="item.change && item.change(scope.row)" />
            <!-- 图像 -->
            <img v-if="item.type==='Image'" :src="scope.row[item.prop]" @click="item.handle && item.handle(scope.row)">
            <!-- 滑块 -->
            <el-slider v-if="item.type==='Slider'" v-model="scope.row[item.prop]" :disabled="item.isDisabled && item.isDisabled(scope.row)" @change="item.change && item.change(scope.row)" />
            <!-- 标签 -->
            <el-tag v-if="item.type==='Tag'&&scope.row[item.prop]" :effect="scope.row[item.effect]||'dark'" :color="scope.row[item.color]">{{ scope.row[item.prop] }}</el-tag>
            <!-- 标签列表 -->
            <span v-if="item.type==='TagList'">
              <el-tag v-for="(ra,index) in item.html(scope.row)" :key="index" :effect="'dark'" :color="ra.color" :closable="item.closable||false" style="margin: 5px 5px;line-height: 25px;" @close="item.closeFn && item.closeFn(scope.row,ra.value)">
                {{ ra.label }}
              </el-tag>
            </span>
            <!-- 默认 -->
            <span v-if="!item.type" :style="item.itemStyle && item.itemStyle(scope.row)" :class="item.itemClass && item.item.itemClass(scope.row)">{{ (item.formatter && item.formatter(scope.row)) || scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <template #empty>
          <div style="margin-top:20px;">
            <i style="font-size:60px;color:#DAE0E5;" class="iconfont icona-zu1575" />
            <p>暂无数据</p>
          </div>
        </template>
      </el-table>
    </section>
    <!-- 分页 -->
    <section v-if="isPagination && currentPagination.total>0" class="cy-pagination">
      <el-pagination v-model:currentPage="pagination.pageIndex" :background="currentPagination.background" :layout="currentPagination.layout||'total, sizes, prev, pager, next, jumper'" :page-size="currentPagination.pageSize" :total="currentPagination.total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
    </section>
  </section>
</template>

<script>
import { h } from 'vue'

export default {
  props: {
    // 表格型号：["default", "small", "large"]
    size: { type: String, default: 'default' },
    isBorder: { type: Boolean, default: false },
    loading: { type: Boolean, default: false },
    // 表格操作
    isHandle: { type: Boolean, default: false },
    tableHandles: { type: Array, default: () => [] },
    // 斑马线
    stripe: { type: Boolean, default: false },
    // 最大高度
    maxHeight: { type: String, default: 'auto' },
    // 表格数据
    tableData: { type: Array, default: () => [] },
    // 表格列配置
    tableCols: { type: Array, default: () => [] },
    // 是否显示表格复选框
    isSelection: { type: Boolean, default: false },
    defaultSelections: { type: [Array, Object], default: () => null },
    // 是否显示表格索引
    isIndex: { type: Boolean, default: false },
    indexLabel: { type: String, default: '序号' },
    // 是否显示分页
    isPagination: { type: Boolean, default: true },
    // 分页数据
    pagination: {
      type: Object,
      default: () => ({ background: true, pageSize: 10, pageIndex: 1, total: 0, layout: 'total, sizes, prev, pager, next, jumper' })
    },
    treeProps: {
      type: Object,
      default: () => ({ })
    },
    rowKey: {
      type: String,
      default: 'id'
    },
    // 通过值判断 CheckBox 是否可以勾选
    isCheckSelect: { type: String, default: null }
  },
  data() {
    return {
      currentPagination: this.pagination
    }
  },
  computed: {
    filterList: function() {
      return false
    },
    theme() {
      return this.$store.state.app.theme
    }
  },
  watch: {
    defaultSelections(val) {
      this.$nextTick(function() {
        if (Array.isArray(val)) {
          val.forEach(row => {
            this.$refs.cyTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.cyTable.toggleRowSelection(val)
        }
      })
    }
  },
  mounted() {
    // 表格默认勾选
    this.tableData.forEach(item => {
      if (item.checkbox) {
        this.$refs.cyTable.toggleRowSelection(item)
      }
    })
  },
  methods: {
    expandChange(row, expand) {
      this.$emit('expandChange', row)
    },
    // 表格勾选
    handleSelectionChange(rows) {
      this.$emit('select', rows)
    },
    // 全选
    selectAll(rows) {
      this.$emit('select', rows)
    },
    //
    handleCurrentChange(val) {
      this.currentPagination.pageIndex = val
      // if (this.pagination.total > val * (this.pagination.pageSize - 1)) {
      //   this.$emit('pageChange', this.pagination)
      // }
      this.$emit('pageChange', this.pagination)
    },
    handleSizeChange(val) {
      this.currentPagination.pageSize = val
      this.$emit('pageChange', this.pagination)
    },

    // tableRowClassName({rowIndex}) {
    //     if (rowIndex % 2 === 0) {
    //         return "stripe-row";
    //     }
    //     return "";
    // }
    renderHeader(obj) {
      return h('span', { class: 'cy-table-require' }, obj.column.label)
    },
    handleCommand(val) {
      if (val.handle) {
        val.handle(val)
      }
    },
    checkSelectable(row) {
      return this.isCheckSelect ? !row[this.isCheckSelect] : true
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.cy-table-page {
  display: flex;
  flex-direction: column;
  padding: 0 32px;
  margin-top: 24px;
}
.cy-table-require::before {
  content: "*";
  color: red;
}
.cy-pagination {
  height: 45px;
  text-align: right;
  padding-top: 10px;
  display: flex;
  justify-content: right;
}
.cy-handle {
  text-align: right;
  min-height: 30px;
  .iconfont {
    font-size: 14px;
  }
}

.el-dropdown-link {
  color: #1890FF;
  margin-left: 10px;
  cursor: pointer;
}
button {
  display: inline-block;
}
.el-select {max-width: 300px;}
.el-tag--dark{
  border: none;
}
/*:deep{
  .switchStyle .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
  }
  .switchStyle .el-switch__label--left {
    z-index: 9;
    left: 6px;
  }
  .switchStyle .el-switch__label--right {
    z-index: 9;
    left: -14px;
  }
  .switchStyle .el-switch__label.is-active {
    display: block;
  }
  .switchStyle.el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 60px !important;
  }
}*/
</style>
